<template>
	<div style="display: flex;flex-direction: column;" class="otherPage productsAndServices companyStrength">
		<Header :selected="5"></Header>
		<div class="bannerArea">
			<div class="banner" :style="bg_img? 'background:url('+bg_img+') no-repeat;background-size:cover;':''"></div>
		</div>
		<Navigation v-loading="loading" :items="breadcrumbItems" :menus="menus" :checked="1" :bgColor="bgColor">
		</Navigation>
		<div class="content">
			<div class="content_bg">
				<!-- 认证资质 -->
				<el-row style="display: flex;flex-direction: column;margin-bottom: 4vh;">
					<el-col :span="3">
						<div class="QualificationText">{{$t("certificationQualification")}}</div>
					</el-col>
					<el-col :span="24">
						<el-card class="box-card" shadow="hover">
							<div>
								<el-row :gutter="10">
									<el-col :xs="24" :sm="12" :md="8" :lg="6" :title="item.name"
										v-for="(item,index) in zzInfo" :key="index">
										<div class="qualificationItems" @click="showImage(item.fileUrl)">
											{{item.name}}
										</div>
									</el-col>
								</el-row>
							</div>
						</el-card>
					</el-col>
				</el-row>
				<!-- 实力展示 -->
				<el-row style="display: flex;flex-direction: column;">
					<el-col :span="3">
						<div class="QualificationText">{{$t("strengthDisplay")}}</div>
					</el-col>
					<el-col :span="24">
						<el-card class="box-card" shadow="hover">
							<!-- 轮播图-大 -->
							<div class="swiper-container swiper-containerBig">
								<div class="swiper-wrapper">
									<div class="swiper-slide" v-for="(image, index) in thumbsData" :key="index">
										<img style="width: 100%; height:auto;" :src="image.imageUrl" alt="Image" />
									</div>
								</div>
								<div class="swiper-pagination"></div>
							</div>
							<!-- 缩略图 -->
							<div class="swiper-container-thumbnails" ref="thumbnailsContainer" id="thumbnailsContainer">
								<div class="swiper-wrapper thumbnailsSwiper-wrapper">
									<div :class="'swiper-slide '+ (index==0?'new-active-class':'') "
										v-for="(image, index) in thumbsData" :key="index">
										<img style="width: 100%; height:auto;" :src="image.imageUrl" alt="Thumbnail"
											@click="goToSlide(index)">
									</div>
								</div>
							</div>
						</el-card>
					</el-col>
				</el-row>
			</div>
		</div>
		<!-- 资质图片预览 -->
		<el-dialog :visible="dialogVisible" top="33vh" :width="dialogWidth"
			@update:visible="dialogVisible = arguments[0]">
			<img :src="selectedImage" width="100%" />
		</el-dialog>
		<Footer></Footer>
	</div>
</template>

<script>
	import Header from '../../components/common/header/Header.vue'
	import Navigation from '../../components/common/navigation/Navigation.vue'
	import Footer from '../../components/common/footer/Footer.vue'
	import {
		productsAndServicesMenu
	} from '../../utils/menu.js'
	// 导入您需要的模块
	import Swiper from "swiper";
	export default {
		components: {
			Header,
			Navigation,
			Footer
		},
		data() {
			return {
				loading: true,
				swiper: null,
				activeIndex: 0,
				bg_img: '', //头部banner，默认值已绑定，有背景自动切换
				bgColor: "white", //white/red
				menus: productsAndServicesMenu,
				breadcrumbItems: [{
						label: this.$t('home'),
						to: '/'
					},
					{
						label: this.$t('productsAndServices'),
						to: '/productsAndServices'
					},
					{
						label: this.$t('companyStrength'),
						to: '/companyStrength'
					}
				],
				zzInfo: [],
				certificationQualification: [],
				thumbsData: [],
				selectedImage: '',
				dialogVisible: false,
				dialogWidth: '50%'
			};
		},
		computed: {},
		created() {
			if (window.innerWidth <= 440) {
				this.dialogWidth = '90%';
			} else if (window.innerWidth <= 768) {
				this.dialogWidth = '70%';
			} else if (window.innerWidth <= 1366) {
				this.dialogWidth = '60%';
			} else {
				this.dialogWidth = '50%';
			}
			window.addEventListener('resize', this.handleWindowResize);
		},
		mounted() {
			this.qyslBgImage();
			this.qyslInfo().then(res => {
				this.initSwiper();
			});
		},
		methods: {
			handleWindowResize() {
				if (window.innerWidth <= 440) {
					this.dialogWidth = '90%';
				} else if (window.innerWidth <= 768) {
					this.dialogWidth = '70%';
				} else if (window.innerWidth <= 1366) {
					this.dialogWidth = '60%';
				} else {
					this.dialogWidth = '50%';
				}
			},
			//获取背景图
			qyslBgImage() {
				let params = {};
				let that = this;
				that.$request.qyslBgImage(params).then(res => {
					this.bg_img = this.$request.getImgUrl() + res.data.fileUrl
					this.loading = false;
				}).catch((error) => {
					console.log(error);
				});
			},
			//获取企业实力信息
			qyslInfo() {
				return new Promise((resolve, reject) => {
					let params = {};
					let that = this;
					that.$request.qyslInfo(params).then(res => {
						if (res && res.data) {
							that.certificationQualification = res.data.strengthShowList;
							that.zzInfo = res.data.zzInfo;
							that.certificationQualification.forEach(function(item, index) {

								that.thumbsData.push({
									imageUrl: item.fileUrl
								})
								resolve();
							})
						}
					}).catch((error) => {
						console.log(error);
					});
				});
			},
			//初始化轮播图
			initSwiper() {
				let that = this;
				new Swiper('.swiper-container', {
					autoplay: {
						delay: 3000, // 自动切换的时间间隔，单位为毫秒
						disableOnInteraction: false // 用户操作后是否停止自动切换，默认为true
					},
					// 主要的Swiper轮播图配置
					pagination: {
						el: '.swiper-pagination',
						clickable: true,
					},
					on: {
						slideChange: function() {
							var currentIndex = this.activeIndex; // 获取当前索引
							console.log('var currentIndex = this.activeIndex; 获取当前索引', currentIndex)
							// 执行相关操作
							that.changeThumbnail(currentIndex);
						}
					},
					thumbs: {
						swiper: new Swiper('.swiper-container-thumbnails', {
							// 缩略图Swiper配置
							slidesPerView: 4,
							spaceBetween: 5,
							freeMode: true,
							watchSlidesVisibility: true,
							watchSlidesProgress: true,
						})
					}
				})
			},
			//缩略图改变触发方法
			changeThumbnail(index) {
				const thumbnailsContainer = this.$refs.thumbnailsContainer;
				if (thumbnailsContainer) {
					const bElements = thumbnailsContainer.querySelectorAll('.swiper-wrapper .swiper-slide');
					const thirdBElement = bElements[index];
					bElements.forEach((bElement, index) => {
						bElement.classList.remove('new-active-class');
					});
					thirdBElement.classList.add('new-active-class'); // 添加一个新的class
				}
			},
			//轮播图跳转
			goToSlide(index) {
				this.swiper.slideTo(index + 1); // +1 是因为主swiper的第一张是loop模式下的最后一张
			},
			showImage(selectedImage) {
				this.selectedImage = selectedImage;
				this.dialogVisible = true;
			},
		}
	}
</script>

<style scoped>
	@import url("../../components/common/css/productsAndServices/productsAndServices.css");

	.QualificationText {
		width: 100px;
		text-align: center;
		height: 40px;
		line-height: 40px;
		border: 1px solid #EBEEF5;
		font-size: 1.2em;
		font-weight: 800px;
	}

	.qualificationItems {
		text-align: left;
		height: 30px;
		line-height: 30px;
		font-size: 1.1em;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		cursor: pointer;
		transition: transform 0.3s ease;
	}

	/* 	.qualificationItems:hover {
		color: #0484D7;
		transform: scale(0.98)
	} */

	/* ---------------------------------------------------- */
	.companyStrength .swiper-container {}

	.companyStrength .swiper-container-thumbnails {
		margin: 5px auto;
		overflow: hidden;
		cursor: pointer;
	}

	.companyStrength .swiper-thumbnail {
		margin-top: 5vh;
	}

	.companyStrength .swiper-thumbnail-slider {
		display: flex;
		height: 15vh;
	}

	.companyStrength .swiper-thumbnail-slide {
		width: 25%;
		height: 15vh;
		cursor: pointer;
	}

	.companyStrength .swiper-thumbnail-slide img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	#thumbnailsContainer .swiper-slide {
		opacity: 0.5;
	}

	.new-active-class {
		opacity: 1 !important;
	}

	.content_bg {
		margin: 0px auto;
		padding: 50px;

	}

	@media (min-width: 2560px) {
		.content_bg {
			width: calc(2560px * 0.8);
		}

		.swiper-containerBig {
			width: calc(1px*(2560/1920)*960);
			height: calc(1px*(2560/1920)*566);
		}

		.swiper-containerBig .swiper-slide {
			width: 100%;
			height: 100%;
		}

		.companyStrength .swiper-container-thumbnails {
			width: calc(1px*(2560/1920)*960);
		}

		.thumbnailsSwiper-wrapper {
			height: calc(1px*(2560/1920)*152);
		}
	}

	@media (max-width: 2560px) {
		.content_bg {
			width: calc(2560px * 0.8);
		}

		.swiper-containerBig {
			width: calc(1px*(2560/1920)*960);
			height: calc(1px*(2560/1920)*566);
		}

		.swiper-containerBig .swiper-slide {
			width: 100%;
			height: 100%;
		}

		.companyStrength .swiper-container-thumbnails {
			width: calc(1px*(2560/1920)*960);
		}

		.thumbnailsSwiper-wrapper {
			height: calc(1px*(2560/1920)*152);
		}
	}

	@media (max-width: 2320px) {
		.content_bg {
			width: calc(2320px * 0.8);
		}

		.swiper-containerBig {
			width: calc(1px*(2320/1920)*960);
			height: calc(1px*(2320/1920)*566);
		}

		.swiper-containerBig .swiper-slide {
			width: 100%;
			height: 100%;
		}

		.companyStrength .swiper-container-thumbnails {
			width: calc(1px*(2320/1920)*960);
		}

		.thumbnailsSwiper-wrapper {
			height: calc(1px*(2320/1920)*152);
		}
	}

	@media (max-width: 2120px) {
		.content_bg {
			width: calc(2120px * 0.8);
		}

		.swiper-containerBig {
			width: calc(1px*(2120/1920)*960);
			height: calc(1px*(2120/1920)*566);
		}

		.companyStrength .swiper-container-thumbnails {
			width: calc(1px*(2120/1920)*960);
		}

		.swiper-containerBig .swiper-slide {
			width: 100%;
			height: 100%;
		}

		.thumbnailsSwiper-wrapper {
			height: calc(1px*(2120/1920)*152);
		}
	}

	@media (max-width: 1920px) {
		.content_bg {
			width: calc(1920px * 0.8);
		}

		.swiper-containerBig {
			width: 960px;
			height: 566px;
		}

		.swiper-containerBig .swiper-slide {
			width: 100%;
			height: 100%;
		}

		.companyStrength .swiper-container-thumbnails {
			width: 960px;
		}

		.thumbnailsSwiper-wrapper {
			height: 152px;
		}


	}

	@media (max-width: 1720px) {
		.content_bg {
			width: calc(1720px * 0.8);
		}

		.swiper-containerBig {
			width: calc(1px*(1720/1920)*960);
			height: calc(1px*(1720/1920)*566);
		}

		.companyStrength .swiper-container-thumbnails {
			width: calc(1px*(1720/1920)*960);
		}

		.swiper-containerBig .swiper-slide {
			width: 100%;
			height: 100%;
		}

		.thumbnailsSwiper-wrapper {
			height: calc(1px*(1720/1920)*152);
		}
	}

	@media (max-width: 1520px) {
		.content_bg {
			width: calc(1520px * 0.8);
		}

		.companyStrength .swiper-container-thumbnails {
			width: calc(1px*(1520/1920)*960);
		}

		.swiper-containerBig {
			width: calc(1px*(1520/1920)*960);
			height: calc(1px*(1520/1920)*566);
		}

		.thumbnailsSwiper-wrapper {
			height: calc(1px*(1520/1920)*152);
		}

		.swiper-containerBig .swiper-slide {
			width: 100%;
			height: 100%;
		}
	}

	@media (max-width: 1366px) {
		.content_bg {
			width: calc(1366px * 0.8);
		}

		.swiper-containerBig {
			width: calc(1px*(1366/1920)*960);
			height: calc(1px*(1366/1920)*566);
		}

		.companyStrength .swiper-container-thumbnails {
			width: calc(1px*(1366/1920)*960);
		}

		.swiper-containerBig .swiper-slide {
			width: 100%;
			height: 100%;
		}

		.thumbnailsSwiper-wrapper {
			height: calc(1px*(1366/1920)*152);
		}
	}

	@media (max-width: 1120px) {
		.content_bg {
			width: 100%
		}

		.swiper-containerBig {
			width: calc(1px*(1120/1920)*960);
			height: calc(1px*(1120/1920)*566);
		}

		.companyStrength .swiper-container-thumbnails {
			width: calc(1px*(1120/1920)*960);
		}

		.swiper-containerBig .swiper-slide {
			width: 100%;
			height: 100%;
		}

		.thumbnailsSwiper-wrapper {
			height: calc(1px*(1120/1920)*152);
		}
	}

	@media (max-width: 1024px) {
		.swiper-containerBig {
			width: calc(1px*(1024/1920)*960);
			height: calc(1px*(1024/1920)*566);
		}

		.companyStrength .swiper-container-thumbnails {
			width: calc(1px*(1024/1920)*960);
		}

		.swiper-containerBig .swiper-slide {
			width: 100%;
			height: 100%;
		}

		.thumbnailsSwiper-wrapper {
			height: calc(1px*(1024/1920)*152);
		}
	}

	@media (max-width: 900px) {
		.content_bg {
			width: 100%
		}

		.swiper-containerBig {
			width: calc(1px*(900/1920)*960);
			height: calc(1px*(900/1920)*566);
		}

		.companyStrength .swiper-container-thumbnails {
			width: calc(1px*(900/1920)*960);
		}

		.swiper-containerBig .swiper-slide {
			width: 100%;
			height: 100%;
		}

		.thumbnailsSwiper-wrapper {
			height: calc(1px*(900/1920)*152);
		}
	}

	@media (max-width: 768px) {
		.content_bg {
			width: 100%;
			padding: 0px;
		}

		.swiper-containerBig {
			width: 100%;

		}

		.companyStrength .swiper-container-thumbnails {
			width: 100%;
		}

		.swiper-containerBig .swiper-slide {
			width: 100%;

		}

		:v-deep .el-dialog {
			width: 90% !important;
		}

	}

	@media (max-width: 440px) {
		
		.swiper-containerBig .swiper-wrapper{
			height: 100%;
		}
		 .productsAndServices   .swiper-slide {
			max-height: 100%;
		}

		.productsAndServices  .swiper-slide img {
			height: 100% !important;
		}
	}
</style>